<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>CSS Transforms in IE</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript" src="../sylvester.js"></script>
		<script type="text/javascript" src="../transformie.js"></script>

		<style type="text/css" media="screen">
			
			body, html {
				margin: 0;
				padding: 0;
				font-family: Arial;
				font-size: 12px;
				height: 100%;
			}
			
			div.test {

				-moz-transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				
				position: absolute;
				top: 100px;
				left: 100px;
				height: 100px;
				width: 100px;
				background: green;
				padding: 10px;
				color: white;
			}
		
		</style>

		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				var rotation = 0;
				window.setInterval(function() {
					$('div.test').css($.browser.safari ? 'webkitTransform' : 'MozTransform', 'rotate('+(++rotation)+'deg)');
				}, 13);
			});
		</script>

	</head>
	<body style="margin: 0; padding: 0;">
		
		<div style="position: absolute; z-index: 100; top: 100px; left: 0px; width: 100%; border-top: 1px solid black;"></div>
		<div style="position: absolute; z-index: 100; top: 165px; left: 0px; width: 100%; border-top: 1px solid red;"></div>
		<div style="position: absolute; z-index: 100; top: 0px; left: 100px; height: 100%; border-left: 1px solid black;"></div>
		<div style="position: absolute; z-index: 100; top: 0px; left: 165px; height: 100%; border-left: 1px solid red;"></div>
		
		<div class="test" style="">
			Test element
			<div style="height: 20px; background: #fff; border: 2px solid red; margin: 10px; color: black;">I'm another div!</div>
		</div>
		
		<p style='margin: 20px;'>If everything is working properly, the below element should be rotated by 45 degrees<br/>in both Internet Explorer, Safari and Firefox (>= 3.5).</p>
		
	</body>
</html>